<template>
  <!-- 添加分类 -->
  <el-dialog :title="AddSetCateData?'编辑分类':'添加分类'" class="Cate" :visible.sync="dialogVisible" @close="close" width="45%">

    <!-- 主体 -->
    <el-form ref="form" label-width="80px">
      <el-form-item required label="分类名称">
        <el-input v-model="addCateForm.cat_name"></el-input>
      </el-form-item>
      <el-form-item required label="父级分类" v-if="!AddSetCateData">
        <el-cascader expand-trigger="hover" clearable change-on-select :options="CategoriesList" :props="cascaderProps" v-model="selectKeys" @change="parentCateChange"></el-cascader>
      </el-form-item>
    </el-form>

    <!-- 底部 -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('OutdiaAddSet')">取消</el-button>
      <el-button type="primary" @click="BtnAddSetCate">
        提交
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'AddSetCategories',
  data() {
    return {
      dialogVisible: false,  //弹窗开关
      CategoriesList: null,
      selectKeys: [],
      addCateForm: {
        cat_pid: 0,
        cat_name: '',
        cat_level: 0
      },
      cascaderProps: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      }
    }
  },
  props: {
    diaAddSetCate: Boolean,
    AddSetCateData: Object
  },
  watch: {
    diaAddSetCate() {   //监听父级关闭弹窗
      this.dialogVisible = this.diaAddSetCate
      if (this.diaAddSetCate) {
        if (this.AddSetCateData) {
          this.addCateForm.cat_name = this.AddSetCateData.cat_name
        }
      }
    }
  },
  created() {
    this.getCategories()
  },
  methods: {
    close() {  //监听关闭弹窗
      this.$emit('OutdiaAddSet')
      this.selectKeys = []
      this.addCateForm.cat_name = ''
      this.addCateForm.cat_pid = 0
      this.addCateForm.cat_level = 0
    },
    BtnAddSetCate() { //按钮提交编辑
      if (this.AddSetCateData) {
        this.$http.put(`categories/${this.AddSetCateData.cat_id}`, { cat_name: this.addCateForm.cat_name }).then(res => {
          if (res.data.meta.status !== 200) {
            return this.$mess(res.data.meta.msg, 'error')
          }
          this.$mess(res.data.meta.msg, 'success')
          this.$emit('getCategories')
          this.$emit('OutdiaAddSet')
        })
      } else {  //添加新的分类
        if (this.addCateForm.cat_name !== '') {
          this.$http.post('categories', this.addCateForm).then(res => {
            console.log(res)
            if (res.data.meta.status !== 201) {
              return this.$mess(res.data.meta.msg, 'error')
            }
            this.$mess(res.data.meta.msg, 'success')
            this.getCategories()
            this.$emit('getCategories')
            this.$emit('OutdiaAddSet')
          })
        } else {
          this.$mess('请填写分类名称', 'error')
        }
      }
    },
    getCategories() {  //获取分类列表
      this.$http.get('categories', { params: { type: 2 } }).then(res => {
        if (res.data.meta.status !== 200) return
        this.CategoriesList = res.data.data
      })
    },
    parentCateChange() {
      if (this.selectKeys.length > 0) {
        //父级Id
        this.addCateForm.cat_pid = this.selectKeys[this.selectKeys.length - 1]
        //当前分类的等级赋值
        this.addCateForm.cat_level = this.selectKeys.length
        return
      } else {
        this.addCateForm.cat_pid = 0
        this.addCateForm.cat_level = 0
      }
    }
  }
}
</script>

<style lang="less" scoped>
.Cate {
  .el-cascader {
    width: 100%;
  }
}
</style>